<template>
    <div @click="onClick">
        <Row type="flex">
            <img :src="itemData.image" />
        </Row>
        <Row type="flex">
            <div class="price">{{itemData.price}}</div>
        </Row>
        <Row type="flex">
            <div class="dis">{{itemData.description}}</div>
        </Row>
        <Row type="flex">
            <div class="comment">{{itemData.comment}}</div>
        </Row>
        <Row type="flex">
            <div class="self">
                <Tag color="error">自营</Tag>
            </div>
        </Row>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "comProduct",
  props: ["itemData"],
  computed: {
    ...mapState({
      count: state => {
        return state.home.count;
      }
    })
  },
  methods: {
    onClick(e) {
      this.$router.push({ path: "/detail", query: { id: this.itemData.id } });
    }
  }
};
</script>
<style lang="scss" scoped>
.price {
  width: 220px;
  color: red;
  font-size: 24px;
  font-weight: bolder;
  text-align: left;
  margin-bottom: 5px;
}
.dis {
  width: 220px;
  margin-bottom: 5px;
  text-align: left;
}
.comment {
  width: 220px;
  color: #646fb0;
  text-align: left;
  font-weight: 700;
  margin-bottom: 5px;
}
.self {
  width: 220px;
  text-align: left;
}
</style>